<!-- Page布局组件 -->
<template>
	<div class="Page" :style="pageStyle">
		<div class="header">
			<div class="headerContent" :style="headerStyle">
				<slot name="pageHeader"></slot>
			</div>
		</div>
		<div class="content" :style="bodyStyle">
			<slot name="pageContent"></slot>
		</div>
		<div class="footer" :style="footerStyle">
			<slot name="pageFooter"></slot>
		</div>
	</div>
</template>

<script>
	export default {
		name:"page",
		props:{
			pageStyle:{
				type:Object,
				default:function(){
					return {}
				}
			},
			headerStyle:{
				type:Object,
				default:function(){
					return {}
				}
			},
			bodyStyle:{
				type:Object,
				default:function(){
					return {}
				}
			},
			footerStyle:{
				type:Object,
				default:function(){
					return {}
				}
			}
		}
	}
</script>

<style>
	.Page{
		width: 595px;
		height: 842px;
		box-shadow: 0px 0px 5px #666;
		margin: 20px;
		float: left;
	}
	.header,.footer{
		width: 90%;
		margin: 0 auto;
		height: 40px;
		position: relative;
	}
	.headerContent{
		height: 2em;
		width: 100%;
		font-size: 14px;
		position: absolute;
		bottom: 5px;
		/* font-weight: bold; */
	}
	.content{
		width: 95%;
		height: 762px;
		margin: 0 auto;
		/* background-color: #000000; */
	}
	.footer{
		font-size: 14px;
		text-align: center;
		display: flex;
		align-items: center;
		/* width: 90%; */
	}
	
</style>
